<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      class="vc-card-list"
      :style="visual.parseStyle(currNode.currCompStyle)"
    >
      <div
        v-for="(data, index) in dataList"
        :key="index"
        class="vc-card-list-item"
        :style="getStyle(data)"
        @click.stop="() => clickItem(data)"
      >
        <div
          class="vc-card-list-item-title"
          :style="getTitleStyle(data)"
          @click.stop="() => clickTitle(data)"
        >{{data["标题"]}}</div>
        <div
          class="vc-card-list-item-value"
          :style="getValueStyle(data)"
        >{{data["数值"]}}</div>
      </div>
    </div>
  </div>
  <div v-if="initializing" class="loading">
    <div
      v-loading="true"
      element-loading-text="数据加载中..."
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick, onUnmounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object
});

const initializing = ref(true);
const currNode = ref(props.node);
const compStyle = ref({});
const dataList = ref([]);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  await nextTick(() => initializing.value = false);
};

const loadDataList = tool.debounce(async() => {
  initializing.value = true;
  dataList.value = await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value);
  await nextTick(() => initializing.value = false);
});

const getTitleStyle = (data) => {
  const styleList = compStyle.value['styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return visual.parseFontStyle(style, '', 'title.');
};

const getValueStyle = (data) => {
  const styleList = compStyle.value['styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  let result = visual.parseFontStyle(style, '', 'value.');
  if (style && style['value.show'] === false) {
    result += "display: none!important;";
  }
  return result;
};

const getStyle = (data) => {
  const styleList = compStyle.value['styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return style ? visual.parseStyle(style) :
    "background: #409EFF;" +
    "color: white;" +
    "height: 100px;" +
    "justify-content: center;" +
    "align-items: center;" +
    "display: flex;" +
    "flex-direction: column;" +
    "border-radius: 5px;"
};

const clickItem = (row) => {
  eventHandler.trigger("点击事件", {"col": "卡片", "row": row});
};

const clickTitle = (row) => {
  eventHandler.trigger("点击标题事件", {"col": "标题", "row": row});
};

const getData = () => {
  return { inputParam: currNode.value.inputParam || {} };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  loadDataList();
};

onMounted(async() => {
  await init();
  loadDataList();
  await eventHandler.trigger('初始化事件');
});

onUnmounted(() => {
  eventHandler.unregister();
});

defineExpose({ getData, changeStyle, refresh });
</script>